<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<title>Test Page</title>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="./jquery.touch.js"></script>
<script type="text/javascript" src="./timeline.js"></script>
<style>

#timeline { width:800px;position:relative; overflow:hidden; }
#timelineBox {border:1px solid #000000; background-color:#F5EEEC; width:600px; height:115px; overflow:hidden; padding:10px;}
	
#timeline .item {
	position:relative; 
	float:left; 
	padding-bottom: 12px; 
	width:150px; 
	font-size:14px; 
	line-height:18px; 
	color:#998675;
  	background-color:#FFFFEE;
  	height:60px;
}
.itemData {height:40px; border:1px solid #000000; padding:2px; margin-right:4px;}
  
#timeline .prev { position:absolute; left:10px; top:60px;}
#timeline .next { position:absolute; right:20px; top:60px;}
  
#draggable { cursor:pointer ; position: relative;}
#draggable a , a:hover{cursor:pointer;}
</style>
<script language="javascript">
    $(document).ready(function(){
 		 var tLine = new Timeline({
 			draggableId : 'draggable',
 			width :600,
 			height:110,
 			itemWidth : 150,
			itemClass: 'item',
 			nextBtn :'nextBtn',
 			prevBtn :'prevBtn'
 		 });
    });
 </script>
</head>
<body>

<center>
<div id="timeline">
	  <h3>Timeline</h3>
	  <div id="timelineBox">	
	  	 <a id="prevBtn" class="prev" href="javascript:" style="z-index:10">previous</a>
		 <div id="draggable" style="border:1px solid red;">
			      <div class="item">
			      		<div class="itemData">
			      			 item 1
			      		</div>
			      		<center>1790s</center>
			      </div>
			      <div class="item">
				  	<div class="itemData">
			      			 item 2
			      		</div>
			      		<center>1800s</center>
			      </div>
			      <div class="item">
				  		<div class="itemData">
			      			 item 3
			      		</div>
			      		<center>1810s</center>
			      </div>
			      <div class="item">
				  		<div class="itemData">
			      			 item 4
			      		</div>
			      </div>
			      <div class="item">
				  		<div class="itemData">
			      			 item 5
			      		</div>
			      </div>
			        <div class="item">
				  		<div class="itemData">
			      			 item 6
			      		</div>
			      </div>
			      <div class="item">
				  		<div class="itemData">
			      			 item 7
			      		</div>
			      </div>
			      <div class="item">
				  		<div class="itemData">
			      			 item 8
			      		</div>
			      </div>
			      <div class="item">
				  		<div class="itemData">
			      			 item 9
			      		</div>
			      </div>			
		</div>
		<a id="nextBtn" class="next" href="javascript:" style="z-index:10">next</a>
	  </div>
</div>
</center>
</body>
</html>